<template>
  <div>
    <h3>HelloWorld</h3>
    <button @click="fn1">触发自定义事件</button>
  </div>
</template>

<script>
import { ref, h } from 'vue'

export default {
  inheritAttrs: false,

  props: {
    initialCount: {
      type: Number,
      required: true
    }
  },

  /**
   * context 是个普通对象，可以做解构
   */
  setup(props, context) {
    // console.log('props', props)
    // console.log('context', context)
    // 就是 this.$attrs
    // console.log(context.attrs)

    // 就是 this.$slots 是一个对象，接受到的是传递给当前组件的插槽内容
    // console.log(context.slots)

    // Vue3 新增的内容,用于控制对父组件的暴露
    // console.log(context.expose)

    // 就是 this.$emit
    // console.log(context.emit)

    const count = ref(props.initialCount)

    const fn1 = () => {
      console.log('fn1')
      // 使用 context.emit 触发自定义事件
      context.emit('abcd', '张三')
    }

    // 调用 context.expose
    // context.expose()

    return {
      count,
      fn1
    }

    // 返回一个 render 函数，用于渲染组件模板
    // return () => {
    //   // <slot name="zhangsan" />
    //   return h('div', null, [
    //     context.slots.default({ name: '张三' }),
    //     context.slots.top(),
    //     h('p', null, count.value)
    //   ])
    // }
  },

  expose: ['initialCount']
}
</script>
